<template>
  <m-container class="login">
    <view class="content">
      <view class="header">
        <image src="@/static/logo.png"></image>
        <text class="title">您好，欢迎您的登录</text>
      </view>
      <view class="main">
        <u-form ref="uForm" :model="form" label-width="150rpx" label-position="top">
          <u-form-item prop="username" required label="账号" left-icon="account" :border-bottom="false">
            <u-input v-model="form.username" placeholder="请输入账号" focus border />
          </u-form-item>
          <u-form-item prop="password" required label="密码" left-icon="lock" :border-bottom="false">
            <u-input v-model="form.password" type="password" placeholder="请输入密码" border />
          </u-form-item>
          <u-form-item
            prop="code"
            required
            label="验证码"
            left-icon="more-circle"
            :border-bottom="false"
            v-if="captchaEnabled"
          >
            <u-input v-model="form.code" type="number" placeholder="请输入验证码" />
            <view slot="right" style="zoom: 0.7" @click="getCaptchaImage">
              <u-image :src="base64" width="284rpx" height="100rpx"></u-image>
            </view>
          </u-form-item>
        </u-form>
      </view>
      <wButton class="wbutton" text="登 录" bg-color="#248dfa" :rotate="isRotate" @click="startLogin"></wButton>
      <view class="footer">
        <!-- <router-link to="{name: 'Forget'}">找回密码</router-link>
        <text>|</text> -->
        <!-- <router-link :to="{ name: 'Register', params: options }">注册账号</router-link> -->
      </view>
    </view>
  </m-container>
</template>

<script>
import { onLoad, onReady } from 'uni-composition-api'
import { login, captchaImage } from '@/api/modules/login'
import { minCache } from '@/utils/min-cache'
import wButton from './components/watch-login/watch-button.vue'
import { router } from '@/router'

export default {
  data() {
    return {
      isRotate: false, //是否加载旋转
      captchaEnabled: false,
      base64: '',
      options: '',
      form: {
        password: '',
        code: '',
        username: '',
        uuid: '',
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入账号',
            trigger: ['change', 'blur'],
          },
        ],
        password: {
          required: true,
          message: '请输入密码',
          trigger: ['change', 'blur'],
        },
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['change', 'blur'],
          },
          {
            type: 'number',
            message: '请输入数字',
          },
        ],
      },
    }
  },
  components: {
    wButton,
  },
  onLoad(options) {
    this.options = options
    this.getCaptchaImage()
    uni.hideTabBar()
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    async getCaptchaImage() {
      const { img, uuid, captchaEnabled } = await captchaImage({})
      this.base64 = 'data:image/gif;base64,' + img
      this.form.uuid = uuid
      this.captchaEnabled = captchaEnabled
    },
    async startLogin(e) {
      const valid = await this.$refs.uForm.validate()
      if (this.isRotate || !valid) {
        return false
      }

      this.isRotate = true
      uni.showLoading({
        title: '登录中',
      })

      try {
        const { token } = await login(this.form)
        if (!token) {
          throw new Error({ msg: '登录错误，请稍后再试' })
          return
        }
        minCache.set('ut', token)
        this.isRotate = false
        uni.showToast({
          icon: 'success',
          title: '登录成功',
          duration: 2500,
          success: () => {
            const {
              query: { redirect },
            } = router.currentRoute
            minCache.set('password', this.form.password)
            const arr = ['Profile', 'Index']
            const params = { name: redirect }
            router.replaceAll({ name: 'Index' })
            // arr.includes(redirect) ? router.pushTab(params) : router.replace(params)
          },
        })
      } catch (error) {
        uni.showToast({
          icon: 'error',
          title: error.msg,
        })
        await this.getCaptchaImage()
        this.isRotate = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import url('./css/main.css');
@import url('./components/watch-login/css/icon.css');

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 20rpx;
  text-align: center;
  display: flex;
}
::v-deep {
  .container__box {
    background: #fff url('@/static/bg.png') no-repeat !important;
    background-size: 100% 100% !important;
  }
}
</style>
